<template>
  <div id="app_">
    <TopBarComponent />
    <MenuComponent />
    <CatalogComponent />
    <div class="editor">

    </div>

    <CommentComponent />
    <FooterComponent />
  </div>
</template>

<script setup lang="ts">
import { onMounted } from 'vue';
import TopBarComponent from './layout/TopBar.vue';
import MenuComponent from './layout/Menu.vue';
import CatalogComponent from './layout/Catalog.vue';
import CommentComponent from './layout/Comment.vue';
import FooterComponent from './layout/Footer.vue';
import { initTools } from './init/index';

import { cardPlugin } from "./plugins/card"; // 插件统一导出文件

import Editor, { ElementType, RowFlex } from './editor';
import { commentList, data, options } from './mock';

onMounted(() => {
  const container = document.querySelector('.editor')!;
  if (container) {
    // 创建编辑器实例并传入默认数据
    const instance = new Editor(container as HTMLDivElement,
      {
        header: [
          {
            value: '第一人民医院',
            size: 32,
            rowFlex: RowFlex.CENTER
          },
          {
            value: '\n门诊病历',
            size: 18,
            rowFlex: RowFlex.CENTER
          },
          {
            value: '\n',
            type: ElementType.SEPARATOR
          }
        ],
        main: data,
        footer: [
          {
            value: 'canvas-editor',
            size: 12
          }
        ]
      },
      options,
    );

    // 保存到window以便调试
    Reflect.set(window, 'editor', instance);

    (window as any).commentList = commentList

    // 为了方便测试，添加一些示例批注操作方法到window对象
    window.addTestAnnotation = function () {
      const testContent = '这是一条测试批注。红细胞比容（HCT）是指每单位容积中红细胞所占全血容积的比值，用于反映红细胞和血浆的比例。';
      instance.executeAnnotation({
        content: testContent,
        userName: '测试用户',
        rangeText: '血细胞比容'
      });
    };

    window.clearAllAnnotations = function () {
      if (window.commentList) {
        window.commentList.length = 0;
        // 手动触发更新事件
        const event = new CustomEvent('annotation:update', { detail: window.commentList });
        window.dispatchEvent(event);
      }
    };

    // 加载AI卡片插件
    instance.use(cardPlugin, { apiKey: 'sk-qtfnglhwcrsubkqihutdwizaooesqujvlhkpdaalbpfhtjke' })

    const isApple = typeof navigator !== 'undefined' && /Mac OS X/.test(navigator.userAgent);
    initTools(instance, isApple, commentList);

  }
});
</script>

<style scoped>
#app {
  width: 100%;
  height: 100vh;
  display: flex;
  flex-direction: column;
  overflow: hidden !important;
  /* 强制确保外部没有滚动条 */
  padding: 0;
  margin: 0;
  position: relative;
  background-color: #FFFFFF;
  /* 设置为雪白色背景 */
}

/* 调整Menu组件的样式，确保与Menu.vue中的样式一致 */
.menu {
  position: relative !important;
  min-height: 40px !important;
  background-color: #fff;
  box-shadow: 0 1px 2px #ddd;
  padding: 5px 10px !important;
  display: flex !important;
  flex-wrap: wrap !important;
  align-items: center !important;
  justify-content: center !important;
  z-index: 100;
  font-size: 12px;
  gap: 5px !important;
  margin-bottom: 10px;
}

/* 确保其他固定定位的组件也能正确显示 */
.catalog {
  position: fixed !important;
  left: 0 !important;
  bottom: 30px !important;
  /* 为底部状态栏留出空间 */
  /* top: 60px !important; */
  /* 为顶部菜单留出空间 */
  /* background-color: #ffffff !important; */
}

.comment {
  position: fixed !important;
  transform: translateX(420px) !important;
  top: 200px !important;
  left: 50% !important;
  z-index: 50;
  /* background-color: #ffffff !important; */
}

.footer {
  position: fixed !important;
  bottom: 0 !important;
  left: 0 !important;
  z-index: 9 !important;
}

/* 调整editor区域，添加滚动条并确保内容完整显示 */
.editor {
  flex: 1;
  overflow-y: auto;
  /* 添加垂直滚动条 */
  display: flex;
  align-items: flex-start;
  justify-content: center;
  padding: 20px;
  min-height: 0;
  background-color: #F2F4F7 !important;
}

.editor>div {
  margin: 0 auto;
  overflow: visible;
  width: 100%;
  max-width: 800px;
  /* 设置最大宽度，使内容更好展示 */
  min-height: 100%;
}

/* 确保canvas元素的阴影效果正确显示，并设置白色背景 */
.editor .ce-page-container canvas {
  box-shadow: rgb(158 161 165 / 40%) 0px 2px 12px 0px !important;
  display: block !important;
  border-radius: 4px;
  background-color: #FFFFFF !important;
}
</style>